<script type="text/javascript">
	dojo.require("dijit.form.Button");
	dojo.require("dijit.Dialog");
	dojo.require("dijit.layout.TabContainer");
	dojo.require("dijit.layout.ContentPane");
	dojo.require("dijit.form.ValidationTextBox");
</script>

<div style="width:100%">
    <form method="POST" name="updateform" id="updateform">
        <select name="branch_number" id="branch_number" jsId="branch_number" size="1" 
        onchange="getFloristsAndcollectionsForSelectedBranch()">
        <?php
        foreach( $this->branches as $branch )
        {
        	$value = $branch['branch_number'];
        	$label = $branch['name'];
            if($value==$this->current_branch)
                echo "<option SELECTED value=\"$value\">$label</option>";
            else
                echo "<option value=\"$value\">$label</option>";
        }
        ?>
        </select>
        <input type="hidden" name="floristsXML" id="floristsXML">
    </form>

</div>

        <!-- caterer form -->
        <div dojoType="dijit.Dialog" 
             id="floristForm" title="Florist"
             style="display:none;opacity:100"
             execute="" class="vendorForm">
            <table cellspacing="6">
                <tr>
                    <td><label for="florist_name">Name: </label></td>
                    <td><input dojoType=dijit.form.ValidationTextBox type="text" required="true" name="florist_name" id="florist_name"></td>
                </tr>
                <tr>
                    <td><label for="florist_address">Address: </label></td>
                    <td><input dojoType=dijit.form.ValidationTextBox 
                    type="text" required="true" name="florist_address" id="florist_address"></td>
                </tr>
                <tr>
                    <td><label for="florist_city">City: </label></td>
                    <td><input dojoType=dijit.form.ValidationTextBox 
                    type="text" required="true" name="florist_city" id="florist_city"></td>
                </tr>
                <tr>
                    <td><label for="florist_state">State: </label></td>
                    <td><input dojoType=dijit.form.ValidationTextBox 
                    type="text" required="true" name="florist_state" id="florist_state"></td>
                </tr>
                <tr>
                    <td><label for="florist_zip">Zip: </label></td>
                    <td><input dojoType=dijit.form.ValidationTextBox type="text"
                               required="true" 
		                    	regExp="\d{5}" 
		                    	invalidMessage="Zip code does not match the <br>required format of NNNNN." 
                               name="florist_zip" id="florist_zip"></td>
                </tr>
                <tr>
                    <td><label for="florist_phone">Phone: </label></td>
                    <td><input dojoType=dijit.form.ValidationTextBox 
                    type="text" required="true" 
                	required="true" 
                	regExp="\(\d{3}\) \d{3}-\d{4}" 
                	invalidMessage="Phone number does not match the<br>required format of (NNN) NNN-NNNN." 
                    name="florist_phone" id="florist_phone"></td>
                </tr>
                <tr>
                    <td><label for="florist_fax">Fax: </label></td>
                    <td><input dojoType=dijit.form.ValidationTextBox 
                    type="text" 
                	required="true" 
                	regExp="\(\d{3}\) \d{3}-\d{4}" 
                	invalidMessage="Fax number does not match the<br>required format of (NNN) NNN-NNNN." 
                    name="florist_fax" id="florist_fax"></td>
                </tr>
                
                <tr>
                    <td><label for="florist_email">Email: </label></td>
                    <td><input dojoType=dijit.form.ValidationTextBox 
                    type="text" 
                	regExp="^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$"
                	invalidMessage="Email address supplied must be of the form 'xxx@yyy.zz'"
                    name="florist_email" id="florist_email"></td>
                </tr>
             
                <tr>
                    <td colspan="2" align="center">
                        <button dojoType=dijit.form.Button type="submit"
                            onClick="return dijit.byId('floristForm').isValid();">OK</button>
                    </td>
                </tr>
            </table>
        </div>

        <!-- menu form -->
        <div dojoType="dijit.Dialog"
             id="collectionForm" title="Floral Collection"
             style="display:none;opacity:100"" class="vendorForm">
            <table cellspacing="6">
                <tr>
                    <td><label for="item_name">Name: </label></td>
                    <td><input dojoType=dijit.form.TextBox type="text" required="true" name="item_name" id="item_name"></td>
                </tr>
                <tr>
                    <td><label for="item_description">Description: </label></td>
                    <td>
                        <input dojoType=dijit.form.TextBox required="true" name="item_description" id="item_description">
                    </td>
                </tr>
                <tr>
                    <td><label for="item_units">Units: </label></td>
                    <td>
                        <select dojoType=dijit.form.FilteringSelect
                                autocomplete="false" type="text" required="true" name="item_units" id="item_units">
                            <option value="">select one</option>
                            <option value="collection" selected>per collection</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><label for="item_cost">Cost: </label></td>
                    <td><input dojoType="dijit.form.ValidationTextBox" 
                    		type="text" 
                    		required="true"
                    		regExp="^[0-9]+\.[0-9]{1,2}$" 
                    name="item_cost" id="item_cost"><br><span style="font-size:10px;padding-right:90px;">Example: 24.00</span></td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <button dojoType=dijit.form.Button type="submit"
                            onClick="return dijit.byId('collectionForm').isValid();">OK</button>
                    </td>
                </tr>
            </table>
        </div>
        
    <div id="floristsDiv" class="vendorDiv">
        <p>Florists</p>
        <table id="floristsGrid" jsId="dFloristsGrid" dojoType="dojox.grid.DataGrid"
               query="{ id: '*' }" store="floristsStore" class="vendorGrid">
            <thead>
                <tr>
                    <th field="id" hidden="true">ID</th>
                    <!-- ahh.  to apply a style to the cells in a column, add classes='className'-->
                    <th field="namecell" width="50%" classes="class1">Florist</th>
                    <th field="loccell" width="50%" classes="class1">Location</th>
                </tr>
            </thead>
        </table>
        <div class="gridButtons">
            <button id="btnNewFlorist"
                    jsId="btnNewFlorist"
                    dojoType="dijit.form.Button"
                    style='font-size:9pt;float:right'>New</button>
            <button id="btnEditFlorist"
                    jsId="btnEditFlorist"
                    dojoType="dijit.form.Button"
                    style='font-size:9pt;float:right'>Edit</button>
            <button id="btnDeleteFlorist"
                    jsId="btnDelFlorist"
                    dojoType="dijit.form.Button"
                    style='font-size:9pt;float:right'>Remove</button>
        </div>
    </div>
        <br><br>
    <div id="collectionsDiv" class="vendorDiv">
        <p>Floral Collections</p>
        <table id="collectionsGrid" jsId="dCollectionsGrid" dojoType="dojox.grid.DataGrid"
               query="{ id: '*' }" store="collectionsStore" class="vendorGrid">
            <thead>
                <tr>
                    <th field="namecell" width="50%" classes="class1">Collection</th>
                    <th field="pricecell" width="50%" classes="class1">Price</th>
                </tr>
            </thead>
        </table>
        <div class="gridButtons">
            <button id="btnNewCollection"
                    jsId="btnNewCollection"
                    dojoType="dijit.form.Button"
                    onClick='newCollection'
                    style='font-size:9pt;float:right'>New</button>
            <button id="btnEditCollection"
                    jsId="btnEditCollection"
                    dojoType="dijit.form.Button"
                    onClick='editCollection'
                    style='font-size:9pt;float:right'>Edit</button>
            <button id="btnDeleteCollection"
                    jsId="btnDelCollection"
                    dojoType="dijit.form.Button"
                    onClick='removeCollection'
                    style='font-size:9pt;float:right'>Remove</button>
	</div>
    </div>
<p style="text-align: center; padding-top: 10px;"><button onclick="saveFloristsAndCollectionsForSelectedBranch()"> Save Changes </button></p>